body {
    min-width: 8.5333rem;
    max-width: 20rem;
    margin: 0 auto;
    background-color: #f2f4f7;
}

// 约束当屏幕大于750px的时候，html文字大小就不变
@media screen and (min-width: 20rem) {
    html {
        font-size: 1rem !important
    }
}

a {
    text-decoration: none;
    color: #707070;
}

.wrop {
    background-color: #fff;
    padding-bottom: 1.1467rem;


    // 此项目是iPhone678=375px 10份 
    // 顶部
    .header {
        height: 2.1333rem;
        // 加下划线
        border-bottom: 1px solid#eaeaea;
        text-align: center;
        // 垂直居中等于高度
        line-height: 2.1333rem;
        font-size: .9333rem;
        color: #1c1c1c;
        font-weight: bold;
    }

    // nav部分

    .nav {
        display: flex;
        // 显示不开就强制换行
        flex-wrap: wrap;
        padding: 1.2rem 0 1.6rem 0;

        // 不用浮动
        .item {

            display: flex;

            width: 33.3333%;
            // 居中对齐做法
            flex-direction: column;
            // 就一行
            align-items: center;

            // 不用设置高度
            img {
                width: 3.7067rem;
                height: 3.7067rem;
            }

            span {
                font-size: .6667rem;
                color: #707070;
            }

            // 选择前面三个只用设置下边距就行了后面就不用操作了
            &:nth-child(-n+3) {
                margin-bottom: 1.6533rem;
            }

        }
    }

    // go模块
    .go {
        margin: 0 .2667rem 0 .48rem;

    }
}

// 中间部分
.con {

    padding: 1.0667rem .64rem;
    background-color: #fff;
    margin-top: .2667rem;

    .con-top {

        display: flex;
        // 两侧对齐
        justify-content: space-between;
        height: 1.0133rem;
        line-height: 1.0133rem;
        margin-bottom: .9067rem;




        // h4默认有一个magrin值因此要去掉
        h4 {

            margin: 0;
            font-size: .7467rem;
            color: #333333;

            .icon {
                // span元素转换为块
                display: inline-block;
                width: 1.0133rem;
                height: 1.0133rem;
                // 让后面文字垂直居中
                vertical-align: middle;
                margin-right: .2667rem;
            }

        }

        .more {
            font-size: .5867rem;
            color: #999999;
        }
    }

    .con-button {

        position: relative;


        .swiper-container {

            height: 100%;
            // 将宽度具体 就可以让图片覆盖
            width: 14.4rem;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            // 竖向显示
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            // 其余的兄弟是0.8
            transform: scale(0.8);
            // 透明度
            opacity: 0.4;

            a {
                width: 9.0133rem;
                height: 10.0267rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            p {
                width: 9.0133rem;
                font-size: .6667rem;
                margin-top: .64rem;
                color: #333;


            }
        }

        // 当前选中的 就是中间那个
        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
            // 压住其他图片 提高层级
            z-index: 999;
            // 透明度
            opacity: 1;
        }
    }
}

.study-a {
    padding-bottom: 3.7333rem;
}

// 学习模块轮播图
.study {


    .swiper {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: .2667rem;
    }

    .swiper-slide {
        // 左对齐
        // text-align: center;
        font-size: 18px;
        background: #fff;
        //    修改宽度 高度 将盒子弄出来
        width: 7.7333rem;
        height: 9.0667rem;
        background-color: #fff;
        // 小圆角
        border-radius: .2667rem;
        // 阴影
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);

        // /* Center slide text vertically */
        // display: -webkit-box;
        // display: -ms-flexbox;
        // display: -webkit-flex;
        // display: flex;
        // -webkit-box-pack: center;
        // -ms-flex-pack: center;
        // -webkit-justify-content: center;
        // justify-content: center;
        // -webkit-box-align: center;
        // -ms-flex-align: center;
        // -webkit-align-items: center;
        // align-items: center;
        // 正常布局
        h5 {
            font-size: .7467rem;
            // h默认有关margin值
            margin: .5333rem 0;
            font-weight: 400;
            padding: 0 .2667rem;
        }

        p {
            font-size: .6933rem;
            color: #ff4400;

        }
    }

    // .swiper-slide img {
    //     display: block;
    //     width: 100%;
    //     height: 100%;
    //     object-fit: cover;
    // }
}

// 底部区域
.footer {
    // 一般底部和上面搜索框就用固定定位
    position: fixed;
    left: center;
    max-width: 20rem;
    bottom: 0;
    height: 2.9333rem;
    width: 100%;
    // 宽度高度都要有
    z-index: 999;
    // 不然会被图片压住 所以提高层级
    background-color: #fff;
    display: flex;
    padding: .5333rem;
    border-top: 1px solid#ccc;

    .item {
        flex: 1;
        display: flex;
        // 居中对齐 先将方向变y 在进行居中 单行
        flex-direction: column;
        align-items: center;

        img {
            width: 1.04rem;
            height: 1.0933rem;
        }

        p {
            font-size: .5867rem;
            color: #666;
            margin-top: .2667rem;
        }
    }
}